<template>
    <div ref="container">
        <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading"
            :getContainer="() => $refs.container" :maskStyle="{ top: '93px', left: '154px' }"
            :wrapClassName="wrapClassNameInfo()" :mask="isDesktop()" :maskClosable="false" @ok="handleOk"
            @cancel="handleCancel" cancelText="关闭" style="top: 20%; height: 45%">
            <template slot="footer">
                <a-button key="back" v-if="isReadOnly" @click="handleCancel"> 关闭 </a-button>
            </template>
            <a-spin :spinning="confirmLoading">
                <a-form :form="form" id="personModal">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型">
                        <a-input placeholder="请输入类型" v-decorator.trim="['name', validatorRules.name]" />
                    </a-form-item>
                    <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型">
                        <a-select placeholder="请选择类型" v-decorator="['type', validatorRules.type]">
                            <a-select-option value="业务员">业务员</a-select-option>
                            <a-select-option value="财务员">财务员</a-select-option>
                        </a-select>
                    </a-form-item> -->
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
                        <a-input placeholder="请输入排序" v-decorator.trim="['sort']" />
                    </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import pick from 'lodash.pick'
import { addPerson, editPerson, checkPerson, addMaterialType, updateMaterialType } from '@/api/api'
import { autoJumpNextInput } from '@/utils/util'
import { mixinDevice } from '@/utils/mixin'
export default {
    name: 'PersonModal',
    mixins: [mixinDevice],
    props: {
        extraType: {
            type: String,
        },
    },
    data() {
        return {
            title: '操作',
            visible: false,
            model: {},
            isReadOnly: false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules: {
                name: {
                    rules: [
                        { required: true, message: '请输入姓名!' },
                        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
                        { validator: this.validatePersonName },
                    ],
                },
                type: {
                    rules: [{ required: true, message: '请选择类型!' }],
                },
            },
        }
    },
    created() {},
    methods: {
        add() {
            this.edit({})
        },
        edit(record) {
            this.form.resetFields()
            this.model = Object.assign({}, record)
            if (this.extraType) {
                this.model.type = this.extraType
            }
            this.visible = true
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'name', 'type', 'sort'))
                autoJumpNextInput('personModal')
            })
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleOk() {
            const that = this
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    let formData = Object.assign(this.model, values)
                    let obj
                    if (!this.model.id) {
                        obj = addMaterialType(formData)
                    } else {
                        obj = updateMaterialType(formData)
                    }
                    obj.then((res) => {
                        if (res.code === 200) {
                            that.$emit('ok')
                        } else {
                            that.$message.warning(res.data.message)
                        }
                    }).finally(() => {
                        that.confirmLoading = false
                        that.close()
                    })
                }
            })
        },
        handleCancel() {
            this.close()
        },
        validatePersonName(rule, value, callback) {
            let params = {
                name: value,
                id: this.model.id ? this.model.id : 0,
            }
            checkPerson(params).then((res) => {
                if (res && res.code === 200) {
                    if (!res.data.status) {
                        callback()
                    } else {
                        callback('名称已经存在')
                    }
                } else {
                    callback(res.data)
                }
            })
        },
    },
}
</script>
<style scoped>
</style>